<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <input type="button" id="o" value="操作">
    <input type="button" id="open" value="打开录音">
    <input type="button" id="start" value="开始录音">
    <input type="button" id="stop" value="停止录音">
    <ul id="recordingslist"></ul>
  </div>
  
</body>
<script src="./record.js"></script>

<script>
  var oBtnOpen = document.getElementById("open");
  var oBtnStart = document.getElementById("start");
  var oBtn = document.getElementById("o");
  var oBtnStop = document.getElementById("stop");
  var record;

  oBtn.onclick = function() {
    record = new Recorder();
  }
  oBtnOpen.onclick = function() {
    record.open();
  }
  oBtnStart.onclick = function() {
    record.start();
  }
  oBtnStop.onclick = function() {
    record.stop();
    record.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      
      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      document.getElementById("recordingslist").appendChild(li);
    })
  }
</script>
</html>